<template>
    <div>
        <Form :label-width="100" ref="formInline" :model="formInline">
            <Row :gutter="16" class="query-form" >
                <i-col span="8">
                    <FormItem label="发送时间：">
                        <DatePicker v-model="formInline.se_date" type="datetimerange" style="width: 100%" format="yyyy-MM-dd" placeholder="请选择查询时间（开始，结束）"></DatePicker>
                    </FormItem>
                </i-col>
                <i-col span="8">
                    <FormItem label="发送人：">
                        <Input type='text' v-model='formInline.createUserName'></Input>
                    </FormItem>
                </i-col>
                <i-col span="8">
                    <div style="float: right;">
                        <Button class="ivu-btn-reset" @click="reseter">重置</Button>
                        <Button class="ivu-btn-query"  icon="md-search"  @click="query">查询</Button>
                    </div>
                </i-col>
            </Row>
        </Form>
        <Row type="flex" justify="start" class="query-form">
            <i-col>
                <Button icon="md-mail" class="ivu-btn-add" @click="addInfo">发送邮件</Button>
            </i-col>
        </Row>
        <Table ref='table' style="margin-top: 10px" :loading="loading" border :columns="columns" no-data-text="没有查询到相关数据！"
               :data="infos" width="100%" :height="tableHeight" highlight-row stripe size="small"></Table>
        <Row type="flex" justify="end" >
            <i-col>
                <Page :total="pagedata.total" :current="pagedata.currentPage" :page-size="pagedata.pageSize"
                      @on-page-size-change="pageSizeChange" @on-change="pageChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </i-col>
        </Row>
        <Modal v-model="modal1" width="800" :mask-closable="false" title="发送邮箱">
            <Form ref="ruleCustom2" :model="formData" :rules="ruleCustom2" label-position="top">
                <Row :gutter="16">
                    <i-col>
                        <FormItem label="邮件标题：" prop="title">
                            <Input type='text' v-model='formData.title'></Input>
                        </FormItem>
                    </i-col>
                </Row>
                <Row :gutter="16">
                    <i-col>
                        <FormItem label="邮件正文：" prop="content">
                            <Input type='textarea' v-model='formData.content'></Input>
                        </FormItem>
                    </i-col>
                </Row>
                <Row :gutter="16">
                    <i-col span="12">
                        <FormItem label="提交资料截止日期："  prop="closingDate">
                            <DatePicker v-model="formData.closingDate" type="date" style="width: 100%" format="yyyy-MM-dd" placeholder="请选择查询时间（开始，结束）"></DatePicker>
                        </FormItem>
                    </i-col>
                </Row>
                <Row :gutter="16">
                    <i-col>
                        <Table ref='table3' style="margin-top: 10px" :loading="loading2" border :columns="column3" no-data-text="没有查询到相关数据！"
                               :data="infos3" width="100%" height="300" highlight-row stripe size="small"></Table>
                    </i-col>
                </Row>
            </Form>
            <div slot="footer">
                <Button @click="saveInfo" class="ivu-btn-save" :loading="buttonLoading">发送</Button>
                <Button @click="modal1 = false" class="ivu-btn-cancel" >取消</Button>
            </div>
        </Modal>
        <Modal v-model="modal2" width="1000" :mask-closable="false" title="企业名单">
            <Form :label-width="100" ref="formInline2" :model="formInline2">
                <Row :gutter="16" class="query-form" >
                    <i-col span="8">
                        <FormItem label="企业名称：">
                            <Input type='text' v-model='formInline2.companyName'></Input>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="二级集团：">
                            <Select v-model="formInline2.twoCompanyId" filterable>
                                <Option v-for="item in twoLevelOrgList" :value="item.orgId" :key="item.orgId">{{ item.orgName }}</Option>
                            </Select>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <div style="float: right;">
                            <Button class="ivu-btn-reset" @click="reseter">重置</Button>
                            <Button class="ivu-btn-query"  icon="md-search"  @click="query">查询</Button>
                        </div>
                    </i-col>
                </Row>
            </Form>
            <Table ref='table2' style="margin-top: 10px" :loading="loading2" border :columns="column2" no-data-text="没有查询到相关数据！"
                   :data="infos2" width="100%" height="200" highlight-row stripe size="small"></Table>
            <div slot="footer">
                <Button @click="saveInfo" class="ivu-btn-save" >确定</Button>
                <Button @click="modal2 = false" class="ivu-btn-cancel" >取消</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

    var cascaderDom = () => import('@/components/cascader-dom.vue');;
    import {sessionStorage} from '@/common/cacheUtils.js';
    import {Api} from '@/api/index.js';

    export default {
        name: "sendMail",
        components:{
            cascaderDom
        },
        data(){
            return {
                formInline: {
                    se_date: []
                },
                formInline2: {

                },
                modal1: false,
                modal2: false,
                loading: false,
                loading2: false,
                buttonLoading: false,
                tableHeight: '',
                ruleCustom: {},
                formData: {},
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                },
                columns: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                        fixed: 'left',
                    },
                    {
                        title: '发送人',
                        align: 'center',
                    },
                    {
                        title: '发送时间',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        fixed: 'right',
                        minWidth: 160,
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px'
                                    },
                                    on: {
                                        click: () => {
                                            this.modal2 = true;
                                            this.updateInfo(params.row);
                                        }
                                    }
                                }, '详情')
                            ]);
                        }
                    },
                ],
                infos: [],
                column2: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left',
                    },
                    {
                        title: '企业名称',
                        align: 'center',
                        key: 'companyName',
                        minWidth: 200,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.companyName || '--')
                            ]);
                        }
                    },
                    {
                        title: '所属二级集团',
                        align: 'center',
                        key: 'twoCompanyName',
                        minWidth: 200,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.twoCompanyName || '--')
                            ]);
                        }
                    },
                    {
                        title: '办公室邮箱',
                        align: 'center',
                        key: 'officeMail',
                        minWidth: 200,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.officeMail || '--')
                            ]);
                        }
                    },
                    {
                        title: '负责人',
                        align: 'center',
                        key: 'ownerName',
                        minWidth: 200,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.ownerName || '--')
                            ]);
                        }
                    },
                    {
                        title: '联系电话',
                        align: 'center',
                        key: 'phoneNumber',
                        minWidth: 200,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.phoneNumber || '--')
                            ]);
                        }
                    },
                ],
                infos2: [],
                twoLevelOrgList: [],
                column3: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                        fixed: 'left',
                    },
                    {
                        title: '企业名称',
                        align: 'center',
                        key: 'companyName',
                        minWidth: 200,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.companyName || '--')
                            ]);
                        }
                    },
                    {
                        title: '企业邮箱',
                        align: 'center',
                        key: 'officeMail',
                        minWidth: 200,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.officeMail || '--')
                            ]);
                        }
                    },
                    {
                        title: '附件类型',
                        align: 'center',
                        key: 'twoCompanyName',
                        minWidth: 200,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.twoCompanyName || '--')
                            ]);
                        }
                    },
                ],
                infos3: [],
                ruleCustom2: {
                    title: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'change, blur'
                        }
                    ],
                    content: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'change, blur'
                        }
                    ],
                    closingDate: [
                        {
                            required: true,
                            type: 'date',
                            message: '  ',
                            trigger: 'change, blur'
                        }
                    ]
                }
            }
        },
        mounted(){
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.queryTwoLevelOrg();
            this.query();
        },
        methods:{
            query(){

            },
            pageSizeChange(pageSize){
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            pageChange(pageNum){
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            addInfo(){
                this.modal1  = true;
                let orgId = '18000000';
                let userId = 'B5B4085DBBC0402982C231E8F6192106,4167c5301a954567995ee356a1a93855,220B5942D8D44088AC506293CE6C599A,713d6003271a449ebe21ad73177a2d77';
                this.$http.get(Api.queryMail, {
                    params: {orgId: orgId, userId: userId}
                }).then(function(res){
                    if(res.data.status == 200){
                        if(res.data.data.length == 0){
                            this.$Notice.warning({
                                title: '未找到相关机构邮箱！',
                                desc:  '请检查邮箱管理！'
                            });
                        }else{
                            this.infos3 = res.data.data;
                        }
                    }else{
                        this.$Message.error('查询失败');
                    }
                }, function(res){
                    this.$Message.error('请求失败');
                    this.loading = false;
                });
            },
            openList(){
                this.modal2 = true;
                this.loading2 = true;
                this.$http.get(Api.mailConfig + '/list', {
                    params: this.formInline2
                }).then(function(res){
                    this.infos2 = res.data.data;
                    this.loading2 = false;
                }, function(res){
                    this.$Message.error('请求失败');
                    this.loading2 = false;
                });
            },
            saveInfo(){
                this.$refs['ruleCustom2'].validate((valid) => {
                    if(valid) {
                        this.buttonLoading = true;
                        this.$http.post(Api.sendMail, this.formData).then(function(response){
                            this.buttonLoading = false;
                            this.modal1 = false;
                            this.$Message.success({  content: '保存成功', duration: 4 });
                        });
                    }
                });
            },
            queryTwoLevelOrg(){
                this.$http.get(Api.twoPlusFourReceipt + '/twoLevelOrg').then((res) => {
                    if(res.data.status == 200){
                        this.twoLevelOrgList = res.data.data;
                    }
                }).catch(e => {
                    this.$Message.error("附件删除失败");
                });
            },
        }
    }
</script>

<style lang='css' scoped>
    @import '../../../index.css';

</style>
